<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container"></div>
  
  <script src="./lib/jquery.js"></script>
  <script src="./lib/template-web.js"></script>

  <!-- 2. 准备好结构 -->
  <script id="tpl-user" type="text/html">
    <div>
      <!-- <h2>{{ flag ? '我是真的' : '我是假的' }}</h2> -->

      <!-- {{ if flag  }}
        <h2>我是好人</h2>
      {{ else }}
        <h2>我是坏人</h2>
      {{ /if }} -->

      <ul>
        {{each arr}}
          <li>我是 {{$index}}个, 值是 {{$value}}</li>
        {{/each}}
      </ul>
    </div>
    
  </script>

  <script>
    // 1.   提供模版需要的数据
    var data = { 
      uname: 'zs',
      age: 20,
      el: '<h2>我是h2</h2>',
      flag: true,
      arr: ['q', 'w', 'e', 'r']
    }

    // 3. art-template融合数据和结构 ，生成一个html的字符串
    let str = template('tpl-user', data)

    // 4. 将生产的 html字符串 渲染上去
    $('.container').html(str)
  </script>

</body>
</html>